/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2023-02-10 21:01:32
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2023-03-03 16:59:23
 */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState } from 'react'
import { observer } from 'mobx-react'
import { View, Text, Image, Form } from '@tarojs/components'
import logoPng from '../../resource/logo.png'
import { AtInput, AtIcon, AtButton } from 'taro-ui'
import './index.scss';



import Taro from '@tarojs/taro';
import { getCodeImg } from '@/api/login'
import { useStore } from '@/store'


const login: React.FC = () => {

  const {UserStore} = useStore();
  const [codeUrl, setCodeUrl] = useState<string>("");
  const [captchaOnOff, setCaptchaOnOff] = useState<boolean>();
  const [loginForm, setLoginForm] = useState<{
    username: string,
    password: string,
    code: string,
    uuid: string
  }>({
    username: "admin",
    password: "admin123",
    code: "",
    uuid: ''
  });

  const handleLogin = async () => {
    Taro.showLoading()
    UserStore.login({...loginForm}).then(async (res)=>{
      if (res) {
        await UserStore.GetInfo()
        // 登录成功，判断记住我是否勾选了
        Taro.reLaunch({
          url: 'pages/home/index'
        })
    } else {
        getCaptchCode()
    }
    }).finally(()=>{
      Taro.hideLoading()
    })
    
  }

  //获取验证吗
  const getCaptchCode = () => {
    getCodeImg().then((res: any) => {
      setCaptchaOnOff(res.captchaOnOff === undefined ? true : res.captchaOnOff);
      if (res.captchaOnOff) {
        setCodeUrl("data:image/gif;base64," + res.img)
        setLoginForm({ ...loginForm, uuid: res.uuid })
      }
    });
  }


  useEffect(() => {
    getCaptchCode();
  }, [])

  return (
    <View>
      <View className="normal-login-container">
        <View className="logo-content">
          <Image style={{ width: '100rpx', height: '100rpx' }} src={logoPng} />
          <Text className="title">若依移动端登录</Text>
        </View>
        <View className="login-form-content">
          <View className="input-item">
            <AtIcon value='user' size='30'></AtIcon>
            <AtInput type="text" placeholder="请输入账号" maxLength={30} name={'username'} value={loginForm.username} onChange={(value: string) => { setLoginForm({ ...loginForm, username: value }) }} />
          </View>

          <View className="input-item">
            <AtIcon value='lock' size='30'></AtIcon>
            <AtInput type="password" placeholder="请输入密码" maxLength={30} name={'password'} value={loginForm.password} onChange={(value: string) => { setLoginForm({ ...loginForm, password: value }) }} />
          </View>

          {
            captchaOnOff === true ? <View className="input-item">
              <AtIcon value='lock' size='30'></AtIcon>
              <AtInput type="text" placeholder="请输入验证码" maxLength={10} name={'uuid'} value={loginForm.code} onChange={(value: string) => { setLoginForm({ ...loginForm, code: value }) }} >
                <Image src={codeUrl} onClick={getCaptchCode} />
              </AtInput>
            </View> : <></>
          }

          <View>
            <AtButton type='primary' onClick={handleLogin}>登录</AtButton>
          </View>
        </View >

      </View >
    </View >
  )
}
export default observer(login);  